<template>
	<view class="customer">
		<view class="customer-list">
			<view class="customer-item" v-for="(data,index) in list" :key="index">
				<view class="customer-item-top">
					<view class="customer-item-top-image"><image :src="data.user.heard_img"></image></view>
					<view class="customer-item-top-info">
						<view class="customer-item-top-name">{{data.user.nickname}}</view>
						<view class="customer-item-top-nickname">微信号：{{data.user.phone}}</view>
					</view>
					<view class="customer-item-top-btn">
						<view class="call" @click="makeCall(data.user.phone)">拨打电话</view>
						<view class="copy" @click="setCopy(data.user.phone)">复制电话</view>
					</view>
				</view>
				<view class="customer-item-bottom">
					<view class="customer-item-bottom-cell">
						<view class="label">姓名：</view>
						<view class="value">{{data.name?data.name:''}}</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">性别：</view>
						<view class="value">{{data.sex?data.sex:''}}</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">年纪：</view>
						<view class="value">{{data.age?data.age:''}}</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">风格：</view>
						<view class="value">{{data.style?data.style:''}}</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">空间：</view>
						<view class="value">{{data.house?data.house:''}}</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">面积：</view>
						<view class="value">{{data.area?data.area:'0'}}㎡</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">预算：</view>
						<view class="value">{{data.budget?data.budget:'0'}}万</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">地址：</view>
						<view class="value">{{data.city?data.city:''}}</view>
					</view>
					<view class="customer-item-bottom-cell">
						<view class="label">咨询时间：</view>
						<view class="value">{{data.add_time?data.add_time:''}}</view>
					</view>
				</view>
			</view>
		</view>
		<loading v-if="loading" text="加载中"></loading>
		<no-more text="没有更多了" v-if="noMore && list.length"></no-more>
		<nothing :btn="false" text="暂无意向客户" v-if="noMore && !list.length"></nothing>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				page: 0,
				noMore: false,
				list: []
			};
		},
		onLoad() {
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.loading = true
				this.init()
			}
		},
		methods: {
			init(){
				let data = {
					page: this.page,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id
				}
				this.$api.CustomerLists(data).then(res => {
					this.loading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.list.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			makeCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			setCopy(phone){
				uni.setClipboardData({
					data: phone,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.customer{
		padding-top: 30rpx;
		.customer-list{
			padding: 0 30rpx;
			.customer-item{
				margin-bottom: 30rpx;
				background-color: #FFF;
				padding: 30rpx;
				border-radius: 8rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.customer-item-top{
					display: flex;
					align-items: center;
					.customer-item-top-image{
						image{
							width: 88rpx;
							height: 88rpx;
							border-radius: 50%;
						}
					}
					.customer-item-top-info{
						flex: 1;
						min-width: 0;
						margin: 0 20rpx;
						.customer-item-top-name{
							font-size: 28rpx;
							font-weight: bold;
							color: #141414;
						}
						.customer-item-top-nickname{
							color: #808080;
							font-size: 22rpx;
							margin-top: 10rpx;
						}
					}
					.customer-item-top-btn{
						view{
							display: block;
							line-height: 48rpx;
							width: 110rpx;
							border-radius: 4rpx;
							font-size: 22rpx;
							text-align: center;
							&.call{
								background-color: #F2F2F2;
								color: #4D4D4D;
								margin-bottom: 12rpx;
							}
							&.copy{
								background-color: #2073F5;
								color: #FFF;
							}
						}
					}
				}
				.customer-item-bottom{
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					margin-top: 30rpx;
					.customer-item-bottom-cell{
						width: 33.3333%;
						white-space: nowrap;
						display: flex;
						margin-bottom: 30rpx;
						&:nth-child(8){
							width: 66%;
						}
						&:last-child{
							width: 100%;
						}
						.label{
							font-size: 24rpx;
							color: #808080;
						}
						.value{
							font-size: 24rpx;
							color: #141414;
						}
					}
				}
			}
		}
	}
</style>
